<template>
	<div class="container">
		<!-- <st-navigation title="实景案例" @computedSize="handleComputedSize"></st-navigation> -->
		<u-gap height="8" bgColor="#F4F4F4"></u-gap>
		<view class="filter-w" :style="{ 'top': `${navBarHeight}px` }">
			<view class="top-wrap ysm-mt">
				<view class="item_wrap">
					<view class="item-select-wrap">
						<uniDataSelect style="z-index: 100;" value="类型" v-model="typeValue" :localdata="typeOptions"
							@change="typeChange" placeholder="类型" :clear="false" class="select-wrap"></uniDataSelect>
					</view>
				</view>
				<view class="item_wrap">
					<view class="item-select-wrap">
						<uniDataSelect style="z-index: 100;" value="风格" v-model="styleValue" :localdata="styleOptions"
							@change="styleChange" placeholder="风格" :clear="false" class="select-wrap"></uniDataSelect>
					</view>
				</view>
			</view>
		</view>

		<view class="a">
			<u-gap height="8" bgColor="#F4F4F4"></u-gap>
			<scroll-view scroll-y="true" :style="'height:'+ H" @scrolltolower="scrolltolowerBtn">
				<PanoramicVideo :isShowHeader="false" :dataSource="dataSourceList" :isEmpty="isEmpty"></PanoramicVideo>
			</scroll-view>
		</view>

	</div>
</template>

<script>
	import PanoramicVideo from './components/PanoramicVideo.vue';
	import uniDataSelect from '@/components/uni-data-select-noborder/uni-data-select.vue';
	export default {
		components: {
			PanoramicVideo,
			uniDataSelect
		},
		props: {
			mainHeight: {
				type: Number
			}
		},
		data() {
			return {
				isEmpty: false,
				navBarHeight: 40,
				styleValue: -1,
				typeValue: -1,
				styleOptions: [],
				dataSourceList: [],
				isTransferData: false,
				reload: false, //判断是否上拉
				page: 1,
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},

				H: "",
				filter: {
					style: '',
					type: '',
				},


				typeOptions: [],
				allConfig: {},
				isShow: true,
			}
		},
		mounted() {
			// if (option.dataSouce && option.dataSouce.length > 0) {
			// 	this.dataSourceList = JSON.parse(JSON.stringify(option.dataSouce));
			// 	this.isTransferData = true;
			// }
			this.loadData();
			this.queryConfig();
		},
		onPullDownRefresh() {
			console.log("111");
			this.page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		watch: {
			mainHeight(newVal) {
				let systemInfo = uni.getSystemInfoSync();
				let tempH = uni.upx2px(60)
				this.H = systemInfo.screenHeight-(newVal + tempH + 16) + 'px'				
			}
		},
		methods: {
			updateComponent() {
				this.isShow = false;
				this.loadData();
				console.log("ssss:", this.dataSourceList)
			},
			callBack(type) {
				this.$emit("callBack", type)
			},
			scrolltolowerBtn() {
				if (this.page >= this.last_page) {
					this.status = 'noMore';
				} else {
					this.reload = false;
					this.contentText.contentdown = '上拉显示更多';
					this.page = this.page + 1; //页码+1
					this.status = 'loading';
					this.loadData();
				}
			},
			handleComputedSize(evt) {
				let {
					navBarHeight
				} = evt;
				this.navBarHeight = navBarHeight;
			},
			styleChange(e) {
				console.log("e:", e);
				this.styleValue = e;
				this.dataSourceList = [];
				this.loadData();
			},
			typeChange(e) {
				console.log("e:", e);
				this.typeValue = e;
				this.dataSourceList = [];
				this.loadData();
			},
			queryConfig() {
				this.$api.get({
					url: '/wanlshop/config/all',
					success: res => {
						let {
							type,
							style
						} = res;
						this.typeOptions = type.map((item) => {
							return {
								value: item.id,
								text: item.name
							}
						})
						// this.typeOptions.unshift({
						// 	value: 0,
						// 	text: '类型'
						// });
						// this.typeOptions.push({
						// 	value: this.typeOptions.length,
						// 	text: '别墅'
						// });
						this.styleOptions = style.map((item) => {
							return {
								value: item.id,
								text: item.name,
								disable: item.disable ? item.disable : false
							}
						});
						// this.styleOptions.unshift({
						// 	value: 0,
						// 	text: '风格'
						// });
						this.allConfig = res;
						const query = uni.createSelectorQuery().in(this);
						query.select('.item-select-wrap-type>.uni-select__selector-item').boundingClientRect(
							data => {
								console.log(data)
							}).exec();
					},
					error: err => {
						console.log(err);
					}
				})
			},
			loadData() {
				if (this.isTransferData) {
					return;
				}
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
				this.$api.get({
					url: '/wanlshop/user/getVideolist',
					data: {
						style: this.styleValue == -1 ? 0 : this.styleValue,
						type: this.typeValue == -1 ? 0 : this.typeValue,
						cate: 0,
					},
					success: res => {
						console.log(res);
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.dataSourceList = this.reload ? this.dataSourceList.concat(res
							.data) : res.data; //数据 追加
						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						uni.hideLoading()
						console.log("this.dataSourceList", this.dataSourceList);
						if (this.dataSourceList.length == 0) {
							this.isEmpty = true;
						} else {
							this.isEmpty = false;
						}
						// uni.hideLoading();
						this.isShow = true;
					},
				});
			},
		}
	}
</script>

<style scoped lang="less">
	// /deep/ .uni-select__input-placeholder {
	// 	width: 130rpx !important;
	// 	padding-right: 24rpx !important;
	// }
	page {
		background-color: #fff;
	}

	.ysm-mt {
		margin-bottom: 20rpx;
	}

	.uni-select__selector {
		padding: 0 10px !important;
	}

	.uni-select__selector-empty,
	.uni-select__selector-item {
		padding: 0 !important;
	}

	.container {
		background-color: #fff;
		// padding: 32rpx;
		height: 100%;
		// padding-top: 110rpx;

		.filter-w {
			height: 60rpx;
			// position: fixed;
			// top: 100rpx;
			// left: 0;
			width: 100vw;
			line-height: 60rpx;
			z-index: 10;
			background: #fff;
			// padding: 20rpx 30rpx;
		}

		.top-wrap {
			display: flex;
			align-items: center;
			justify-content: space-around;
			// border: 0.5px solid #E6E6E6;
			// box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
			border-radius: 8px;
			height: 60rpx;

			.item_wrap {
				// flex: 1;
				margin: 0 auto;
				text-align: center;
				display: flex;
				justify-content: center;

				&:nth-child(2) .item-select-wrap {
					margin-left: -20px;
				}

				/deep/ ::-webkit-scrollbar {
					/*滚动条整体样式*/
					width: 4px !important;
					height: 1px !important;
					overflow: auto !important;
					background: #ccc !important;
					-webkit-appearance: auto !important;
					display: block;
				}

				/deep/ ::-webkit-scrollbar-thumb {
					/*滚动条里面小方块*/
					border-radius: 10px !important;
					box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
					background: #7b7979 !important;
				}

				/deep/ ::-webkit-scrollbar-track {
					/*滚动条里面轨道*/
					// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
					// border-radius: 10px !important;
					background: #FFFFFF !important;
				}
			}

			.item-select-wrap {
				width: 175rpx;
				font-size: 26rpx;

				/deep/ .uni-select__input-box {
					display: flex;
					justify-content: center;

					// /deep/ .uni-select__input-text.uni-select__input-placeholder {
					// 	width: 130rpx !important;

					// }
				}


				text-align: center;



				/deep/.select-wrap {
					.uni-select {
						border: none !important;
					}

					/* .uni-select__selector-item {
					padding: 0 8rpx;
				} */
				}

				.icon {

					margin-left: 16rpx;
					color: #333;
				}
			}
		}
	}
</style>